<template>
  <div>
    <NavBar @handle-search="handleSearch"></NavBar>
    <div class="container">
      <div class="content">
        <h4 class="now">
          正在进行 <el-tag class="ml-2" type="info">{{ playList.length }}</el-tag>
        </h4>
        <todo-item v-for="item of playList" 
        :item="item"
        @del-item="delItem"
        :key="item.name"></todo-item>
        <h4 class="wan">
          已经完成 <el-tag class="ml-2" type="success">{{ finishList.length }}</el-tag>
        </h4>
        <todo-item v-for="item of finishList" 
        :item="item"
        @del-item="delItem"
        :key="item.name"></todo-item>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { computed, onMounted, ref,watch} from "vue";
import NavBar from "./components/NavBar.vue";
import TodoItem from "./components/TodoItem.vue";
import { ElMessage } from 'element-plus'
const list = ref([]);
onMounted(()=>{
   let listStorage = localStorage.getItem("list");
   if(listStorage){
    list.value = JSON.parse(listStorage)
   }
})
const delItem=(name)=>{
  var res = list.value.filter(item=>item.name!=name);
  list.value = res;
}
const handleSearch = (val) => {
  if(val && (!list.value.find(item=>item.name==val))){
    list.value.push({
      checked:false,
      name:val
    })
  }else{
    ElMessage({
      message:"数据重复",
      type:"warning",
      duration:2000
    })
  }
};
const playList = computed(()=>{
  return list.value.filter(item=>!item.checked)
})
const finishList = computed(()=>{
  return list.value.filter(item=>item.checked)
})
watch(list,(newVal)=>{
  localStorage.setItem("list",JSON.stringify(newVal))
},{deep:true})
onMounted(() => {
  document.body.style.setProperty("--el-color-primary", "#6528e0");
  document.body.style.setProperty("--el-color-primary-light-9", "#6528e063");
  document.body.style.setProperty("--el-color-primary-light-3", "#6528e0");
});
</script>
  
<style>
</style>